<template>
  <div class="div1">
      <div>操作日志</div>
  </div>
  <div class="div2">
      <el-card class="box-card" shadow="never">
          <div class="box"><img src="../assets/images/u453.png" alt=""><span>筛选</span></div>
          <div class="box2">
              <el-form :inline="true" class="demo-form-inline">
                  <el-form-item label="操作人：">
                      <el-input v-model="teacher_name" placeholder="" />
                  </el-form-item>
                  <el-form-item label="操作时间：">
                      <el-col :span="11">
                          <el-date-picker v-model="startTime" type="date" placeholder="开始日期"
                              style="width: 100%" />
                      </el-col>
                      <el-col :span="2" class="text-center">
                          <span class="text-gray-500">-</span>
                      </el-col>
                      <el-col :span="11">
                          <el-date-picker v-model="endTime" type="date" placeholder="结束日期"
                              style="width: 100%" />
                      </el-col>
                  </el-form-item>
                  <el-form-item>
                      <el-button class="btn" type="primary" @click="search">
                          <img src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u450.png"
                              alt="" />筛选
                      </el-button>
                      <!-- 清空筛选条件按钮 -->
                      <span class="btn1" @click="reset">清空筛选条件</span>
                  </el-form-item>
              </el-form>
          </div>
      </el-card>
      <el-card class="box-card1" shadow="never">
          <!-- 新增、回收站按钮 -->
          <div class="l-top">
              <div class="lt-left">
                  <img style="vertical-align: middle"
                      src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u434.png"
                      alt="" />
                  <span class="ll-text">日志列表</span>
              </div>
          </div>
          <!-- 表格 -->
          <div class="table">
              <el-table :data="tableData" style="width: 100%"
                  :header-cell-style="{ background: '#9137f3', color: '#ffffff', height: '60px', 'text-align': 'center' }">
                  <el-table-column property="operateModule" label="操作人" width="120" align="center" />
                  <el-table-column property="operateName" label="操作模块" align="center" />
                  <el-table-column property="operateTime" label="操作时间" align="center" />
                  <el-table-column property="content" label="操作内容" align="center" />
              </el-table>
          </div>
          <div class="total">
              <span style="font-family:'思源黑体';font-weight:400;">共</span>
              <span style="font-family:'思源黑体 Bold', '思源黑体 ,Regular';font-weight:700;color:#9137F3;">{{Math.ceil(total/limit)}}</span>
              <span style="font-family:'思源黑体';font-weight:400;">页/</span>
              <span style="font-family:'思源黑体 Bold', '思源黑体 Regular;', '思源黑体';font-weight:700;color:#9137F3;">{{total}}</span>
              <span style="font-family:'思源黑体';font-weight:400;">条数据</span>
              <el-pagination v-model:page-size="limit" :page-sizes="[10, 20, 30]" default background
                  @current-change="changePage" layout="prev, pager, next" :total="total" class="mt-4" />
          </div>
      </el-card>
  </div>
</template>
<script setup>
import { ElCard, ElForm, ElFormItem, ElButton, ElInput, ElCol, ElTimePicker, ElDatePicker, ElTable, ElTableColumn, ElPagination, ElAvatar } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from '../utils/http'
import { useRouter } from "vue-router";
let page = ref(1);
let limit = ref(10);
let total = ref(0);
const router = useRouter();
let teacher_name = ref("");
let startTime = ref("");
let endTime = ref("");
const search = () => {
axios({
  url: "/StarTeacher/ConditionQuery",
  params: {
    teacher_name:teacher_name.value,
    startTime: startTime.value,
    endTime: endTime.value,
    page: page.value,
    limit: limit.value,
  },
}).then(({ data }) => {
  if (data.code == 0) {
    tableData.value = data.data.list;
    total.value = data.data.totalCount;
  }
});
};
const reset = () => {
  teacher_name.value = "";
  startTime.value = "";
  endTime.value = "";
  getData();
};
const Add = function () {
  router.push({
      name: 'TeacherAdd'
  })
}
const toBin = function () {
  router.push({
      name: 'TeacherBin'
  })
}
const handleEdit = function (id) {
  router.push({
      name: "TeacherEdit",
      query: { id: id }
  });
}
const handleDelete = (id) => {
  axios({
      url: "/StarTeacher/garbage",
      params: {
          id: id
      }
  }).then(({ data }) => {
      if (data.code == 0) {
          ElMessage({
              message: "加入回收站成功",
              type: "success",
          });
          getData();
      }
  });
};
const tableData = ref([])
let changePage = function (value) {
  page.value = value;
  getData();
};
const getData = function () {
  axios({
      url: '/operateLog/queryAll',
  }).then(({ data }) => {
      if (data.code == 0) {
          tableData.value = data.data.list;
          total.value = data.data.pageSize;
          limit.value=data.data.totalCount
      } else {
          ElMessage.error("数据加载失败！");
      }
  });
}
onMounted(() => {
  getData();
});
</script>
<style lang="less">
.div1 {
  height: 70px;
  display: flex;
  align-items: center;

  div {
      font-weight: 700;
      margin-left: 115px;
      font-size: 24px;
      color: rgb(145, 55, 243);
  }
}

.div2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  .box-card {
      width: 1100px;
      height: 130px;

      .box {
          margin-top: 16.8px;
          margin-left: 28.8px;
          display: flex;
          align-items: center;

          img {
              width: 16px;
              height: 16px;
          }

          span {
              font-family: '思源黑体';
              font-weight: 400;
              font-style: normal;
              font-size: 14px;
              color: #999999;
              margin-left: 3px;
          }
      }

      .box2 {
          margin-top: 24px;
          margin-left: 28.8px;
          display: flex;
          align-items: center;
      }
  }

  .box-card1 {
      width: 1100px;
      _height: 1100px;
      margin-top: 12px;
  }
}

.lt-left {
  margin-left: 28.8px;
  margin-top: 24px;
}

// .el-pagination {
//     float: right;
//     margin-top: 60px;
// }

.bin {
  color: #999999;
  font-size: 13px;
  cursor: pointer;
  float: left;
  margin-top: 60px;
}

.total {
  margin-top: 50px;
  margin-right: 28.8px;
  font-size: 12px;
  color: #333333;
  display: flex;
  align-items: center;
  float: right;
}

.lt-right {
  margin-top: 24px;
  margin-right: 28.8px;
}

.table {
  margin-top: 40px;
  margin-left: 28.8px;
  margin-right: 28.8px;
}

.el-card__body {
  padding: 0;
}

.text-gray-500 {
  margin-left: 15px;
}

.btn {
  background-color: #9137f3;
  border: 1px solid #9137f3;
}

//   清空筛选条件按钮
.btn1 {
  color: #9137f3;
  background-color: white;
  border: 1px solid white;
  margin-left: 20px;
  cursor: pointer;
}

.l-top {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 轮播图列表文字
.ll-text {
  color: #666666;
  font-weight: 400;
  font-size: 14px;
  margin-left: 5px;
}

// 新增轮播图按钮
.addBtn,
.delBtn {
  background-color: white;
  border: 1px solid #9137f3;
  color: #9137f3;
}

.delBtn {
  margin-left: 22px;
}
</style>
<style>
.el-input__wrapper {
  width: 180px;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  border-radius: 16px;
  border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev:hover {
  color: #ffffff;
  background-color: #9239f3;
}

.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev:disabled {
  color: #9239f3;
  background-color: #ffffff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  color: #9239f3;
  background-color: #ffffff;
  border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li:hover {
  color: #ffffff;
  background-color: #9239f3;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  color: #ffffff;
  background-color: #9239f3;
}
</style>